<template>
  <a-layout-sider
      :style="{ background: '#fff', width: siderWidth }"
      :collapsed="collapsed"
      collapsible
      @collapse="handleCollapse"
  >
    <a-menu
        v-model:selectedKeys="selectedKeys"
        :openKeys="openKeys"
        :style="{ height: '100%', borderRight: 0, background: '#fff' }"
        mode="inline"
    >
      <a-menu-item key="/welcome">
        <router-link to="/welcome">
          <coffee-outlined/> &nbsp;欢迎
        </router-link>
      </a-menu-item>
      <a-sub-menu key="base">
        <template #title>
          <span>
            <UnorderedListOutlined/>
            基础数据
          </span>
        </template>
        <a-menu-item key="/base/station">
          <router-link to="/base/station">
            <MenuUnfoldOutlined/> &nbsp; 车站管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/train">
          <router-link to="/base/train">
            <MenuUnfoldOutlined/> &nbsp; 车次管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/train-station">
          <router-link to="/base/train-station">
            <MenuUnfoldOutlined/> &nbsp; 列车管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/train-carriage">
          <router-link to="/base/train-carriage">
            <MenuUnfoldOutlined/> &nbsp; 车厢管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/train-seat">
          <router-link to="/base/train-seat">
            <MenuUnfoldOutlined/> &nbsp; 座位管理
          </router-link>
        </a-menu-item>
      </a-sub-menu>

      <a-sub-menu key="batch">
        <template #title>
          <span>
            <UnorderedListOutlined/>
            跑批管理
          </span>
        </template>
        <a-menu-item key="/batch/job">
          <router-link to="/batch/job">
            <MenuUnfoldOutlined/> &nbsp; 任务管理
          </router-link>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="member">
        <template #title>
          <span>
            <UnorderedListOutlined />
            会员管理
          </span>
        </template>
        <a-menu-item key="/member/ticket">
          <router-link to="/member/ticket">
            <MenuUnfoldOutlined /> 会员车票
          </router-link>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="business">
        <template #title>
          <span>
            <UnorderedListOutlined/>
            业务管理
          </span>
        </template>
        <a-menu-item key="/business/sk-token">
          <router-link to="/business/sk-token">
            <MenuUnfoldOutlined/> &nbsp; 令牌余量
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/confirm-order">
          <router-link to="/business/confirm-order">
            <MenuUnfoldOutlined/> &nbsp; 订单信息管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train-ticket">
          <router-link to="/business/daily-train-ticket">
            <MenuUnfoldOutlined/> &nbsp; 余票信息管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train">
          <router-link to="/business/daily-train">
            <MenuUnfoldOutlined/> &nbsp; 每日车次管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train-station">
          <router-link to="/business/daily-train-station">
            <MenuUnfoldOutlined/> &nbsp; 每日车站管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train-carriage">
          <router-link to="/business/daily-train-carriage">
            <MenuUnfoldOutlined/> &nbsp; 每日车厢管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train-seat">
          <router-link to="/business/daily-train-seat">
            <MenuUnfoldOutlined/> &nbsp; 每日座位管理
          </router-link>
        </a-menu-item>
      </a-sub-menu>
      <a-menu-item key="/about">
        <router-link to="/about">
          <MenuUnfoldOutlined/> &nbsp; 关于
        </router-link>
      </a-menu-item>
      <template #trigger>
        <a-layout-sider-trigger
            v-if="collapsed"
            :class="{ 'collapsed-trigger': collapsed }"
            :placement="collapsed ? 'right' : 'left'"
        />
      </template>
    </a-menu>
  </a-layout-sider>
</template>

<script>
import {defineComponent, ref, watch} from 'vue';
import router from "@/router";


export default defineComponent({
  name: "the-sider-view",

  setup() {
    const selectedKeys = ref([]);
    //const openKeys= ref(['business', 'member','base','batch']);
    const openKeys= ref(['business']);
    const siderWidth = ref('200px'); // 初始宽度
    const collapsed = ref(false); // 是否收缩
    watch(() => router.currentRoute.value.path, (newValue) => {
      console.log('watch', newValue);
      selectedKeys.value = [];
      selectedKeys.value.push(newValue);
    }, {immediate: true});
    // 处理收缩/展开
    const handleCollapse = () => {
      collapsed.value = !collapsed.value; // 更新collapsed的值
      siderWidth.value = collapsed.value ? '20px' : '200px';
    };
    return {
      selectedKeys,
      openKeys,
      siderWidth,
      collapsed,
      handleCollapse,
    };
  },
});
</script>

<style scoped>
.collapsed-trigger {
  width: 20px; /* 收缩状态下的宽度 */
  height: 100%; /* 高度和侧边栏一致 */
}
</style>
